<template>
  <div id="containerEdit" style="height: 1000px; width: 1000px"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as THREE from "./js/three.module.js";
import { APP, camera, scene, renderer } from "./js/app.js";
import { VRButton } from "./js/VRButton.js";

onMounted(() => {
  window.THREE = THREE; // Used by APP Scripts.
  window.VRButton = VRButton; // Used by APP Scripts.

  const loader = new THREE.FileLoader();

  const domVal = document.getElementById("containerEdit");

  loader.load("app.json", function (text) {
    const player = new APP.Player();
    player.load(JSON.parse(text));
    player.setSize(1000, 1000);
    player.play();

    console.log("===>", player.dom);

     domVal.appendChild(player.dom)

    //domVal.appendChild(player.dom);

    window.addEventListener("resize", function () {
      player.setSize(1000, 1000);
    });
  });

});
</script>

<style scoped></style>
